<template>
<div id="aside">

    <div class="logocon flex flex-column align-center py-2">
      <!-- <img src="@assets/images/ec2-logo-th.png" height="28" /> -->
       <img src="@assets/images/logo.png" height="36" />
        <div class="cname pt-1">{{$t('home.cname')}}</div>
    </div>
      <el-scrollbar class="scroll">
    <el-menu class="ec-menu" unique-opened router :default-active="activeMenu">

       <component
        :is="item.children ? ElSubMenu : ElMenuItem"
        v-for="item in menuList"
        :key="item.id"
        :index="item.path"
      >
        <template v-if="item.children" #title>
          <el-icon v-if="item.icon">
            <component :is="item.icon"></component>
          </el-icon>
          <span>{{ item.name }}</span>
        </template>
        <span v-if="!item.children">
          <el-icon v-if="item.icon">
            <component :is="item.icon"></component>
          </el-icon>
          <span>{{ item.name }}</span>
        </span>

        <component
        :is="subItem.list ? ElSubMenu : ElMenuItem"
        v-for="subItem in item.children"
        :key="subItem.id"
        :index="subItem.path"
      >
         <template v-if="subItem.list" #title>
          <span>{{ subItem.name }}</span>
        </template>
        <span v-if="!subItem.list">
          <span>{{ subItem.name }}</span>
        </span>
         <el-menu-item
          v-for="thirdItem in subItem.list"
          :key="thirdItem.id"
          :index="thirdItem.path"
        >
          {{ thirdItem.name }}
        </el-menu-item>
       </component>
        <!-- <el-menu-item
          v-for="subItem in item.children"
          :key="subItem.id"
          :index="subItem.path"
        >
          {{ subItem.name }}
        </el-menu-item> -->
      </component>
    </el-menu>
  </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import {
  House,
  Edit,
  Document,
  Odometer,
  Setting,
  User,
  Goods,
  DataAnalysis,
  PriceTag,
  Monitor
} from "@element-plus/icons-vue";
import { ElMenuItem, ElSubMenu } from "element-plus";
import type { Component } from "vue";
import { ref,watch,computed ,getCurrentInstance} from "vue";
import router from "@/router";
import { useI18n } from "vue-i18n";
const {t}= useI18n()
// import { useLocaleStore } from "@/store/locales";
// const useLocale = useLocaleStore();
// const defaultActive = ref<string>(router.currentRoute.value.path);

const activeMenu = computed(() => router.currentRoute.value.path);
interface MenuItem {
  id: string;
  name: string;
  path?: string;
  icon?: Component;
  children?: MenuItem[];
}


const menuList: MenuItem[] = computed(() =>[
  {
    id: "1",
    name: t('menu.dashboard'),
    path: "/dashboard",
    icon: Odometer,
  },
  {
    id: "7",
    name: t('menu.promotion'),
    icon: Monitor,
    path: "/promotion/activity",
    children: [
      {
        id: "7-1",
        name: t('menu.promotion-act'),
        path: "/promotion/activity",
      },
      {
        id: "7-2",
        name: t('menu.promotion-overviwe'),
        path: "/promotion/overview",
      },
      {
        id: "7-3",
         name: t('menu.promotion-media'),
        path: "/promotion/mediaReport",
      },
      {
        id: "7-4",
        name: t('menu.promotion-recharge'),
        path: "/promotion/rechargeRecord",
      },
      {
        id: "7-5",
        name: t('menu.promotion-bill'),
        path: "/promotion/bill",
      }
    ],
  },
  {
    id: "2",
    name: t('menu.ec'),
    icon: Goods,
    path: "/live",
    children: [
      {
        id: "2-1",
        name: t('menu.live'),
        path: "/live",
      },
      {
        id: "2-2",
        name: t('menu.cart'),
        path: "/live/cart",
      },
      {
        id: "2-3",
        name: t('menu.order'),
        path: "/live/order",
      },
      {
        id: "2-4",
        name: t('menu.goods'),
        path: "/live/goods",
      },
      {
        id: "2-5",
        name:  t('menu.category'),
        path: "/live/category",
      },
      {
        id: "2-6",
        name:  t('menu.website'),
        path: "/live/website",
      },
    ],
  },
  {
    id: "3",
    name: t('menu.marketing'),
    icon: PriceTag,
    path: "/marketing/rule",
    children: [
      {
        id: "3-1",
        name:t('menu.rule'),
        path: "/marketing/rule",
      },
      {
        id: "3-2",
        name: t('menu.gold'),
        path: "/marketing/gold",
      },
      {
        id: "3-3",
        name: t('menu.code'),
        path: "/marketing/code",
      },
      {
        id: "3-4",
        name: t('menu.black'),
        path: "/marketing/black",
      },
      {
        id: "3-5",
        name: t('menu.goshop'),
        path: "/marketing/goshop",
      },
    ],
  },
  {
    id: "4",
    name: t('menu.user'),
    icon: User,
    path: "/user",
    children: [
      {
        id: "4-1",
        name: t('menu.user-list'),
        path: "/user",
      },
      {
        id: "4-2",
        name: t('menu.user-subs'),
        path: "/user/subs",
      },
      {
        id: "4-3",
        name: t('menu.user-group'),
        path: "/user/group",
      },
      {
        id: "4-4",
        name:t('menu.user-msg'),
        path: "/user/message",
      },
    ],
  },
  {
    id: "5",
    name: t('menu.report'),
    path: "/report/order",
    icon: DataAnalysis,
    children: [
      {
        id: "5-1",
        name: t('menu.report-order'),
        path: "/report/order",
      },
      {
        id: "5-2",
        name: t('menu.report-sale'),
        path: "/report/sale",
      },
      {
        id: "5-3",
        name: t('menu.report-user'),
        path: "/report/user",
      },
      {
        id: "5-4",
        name:t('menu.report-cart'),
        path: "/report/cart",
      },
      {
        id: "5-5",
        name: t('menu.report-live'),
        path: "/report/live",
      },
      {
        id: "5-6",
        name:t('menu.report-pay'),
        path: "/report/pay",
      },
    ],
  },
  {
    id: "6",
    name: t('menu.set'),
    path: "/setting/account",
    icon: Setting,
    children: [
      {
        id: "6-1",
        name: t('menu.set-account'),
        path: "/setting/account",
      },
      {
        id: "6-2",
        name: t('menu.set-pay'),
        path: "/setting/payment",
      },
      {
        id: "6-3",
        name: t('menu.set-ship'),
        path: "/setting/shipping",
      },
      {
        id: "6-4",
        name: t('menu.set-morecart'),
        path: "/setting/morecart",
      },
      {
        id: "6-5",
        name: t('menu.set-emall'),
        path: "/setting/emall",
      },
      {
        id: "6-6",
        name: t('menu.set-msg'),
        path: "/setting/messageAuto",
        list:[{
          id:"6-6-1",
          name:t('menu.msg-auto'),
          path:"/setting/messageAuto"
        },{
          id:"6-6-2",
          name:t('menu.msg-start'),
          path:"/setting/messageStart"
        },{
          id:"6-6-3",
          name:t('menu.msg-key'),
          path:"/setting/messageKey"
        },{
          id:"6-6-4",
          name:t('menu.msg-kf'),
          path:"/setting/messageKf"
        },{
          id:"6-6-5",
          name:t('menu.msg-cont'),
          path:"/setting/messageCont"
        },{
          id:"6-6-6",
          name:t('menu.msg-fb'),
          path:"/setting/messageMenu"
        }]
      },
    ],
  },
]);
// const handleSelect = (key: string, keyPath: string[]) => {
//   console.log(key)
//   useLocale.setActiveIndex(key);

// }

</script>

<style lang="scss" scope>
#aside {
  width: 200px;
  //
  height: 100vh;
  .scroll{
    height: calc(100vh - 104px);
  }
  .logocon {

  }
  .cname{
    color:var(--el-color-primary);
  }
}

.el-menu {
  border-right: none;
}

.el-menu-item.is-active {
  color: var(--el-menu-active-color);
  background-color: var(--el-color-primary-light-9);
  border-radius: var(--el-border-radius-base);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
